<template>
  <div class="home">
  <!-- 顶部展示栏 -->
  <div class="top">
    <img src="@/assets/fenghou.jpg" alt="头像" />
    <span>封喉</span>
    <van-search
      placeholder="请输入搜索关键词"
      background="none"
      shape="round"
    />
  </div>
  <!-- 轮播图 -->
  <div class="carousel">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="item in items" :key="item">
        <img :src="item.image" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <!-- 四宫格 -->
  <div class="grid">
    <van-grid :column-num="4">
      <van-grid-item v-for="item in items" :key="item">
        <img :src="item.image" />
        <span>{{ item.text }}</span>
      </van-grid-item>
    </van-grid>
  </div>
  <!-- 歌单列表 -->
  <div class="menu">
      <van-card
        v-for="item in items"
        :key="item"
        :centered="true"
        :desc="item.text"
        :title="item.text"
        :thumb="item.image"
      />
  </div>
</div>
</template>
<script>
export default {
  setup() {
    const items =[
      {
        image: "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
        text: "推荐",


      },
      {
        image: "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
        text: "歌单"
      },
      {
        image: "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
        text: "排行榜"
      },
      {
        image: "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
        text: "歌手"
      },
    ]
    return { items };
  },
};
</script>
<style scoped>
.home {
  background-color: #ebebeb;
}
.top {
  position: fixed;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: rgb(31, 150, 242);
  display: flex;
  align-items: center;
}
.top img {
  width: 10%;
  height: 70%;
  border-radius: 50%;
  margin: 0 1rem;
}
.top span {
  font-size: 25px;
  padding-right: 1rem;
  color: #000000;
}
.carousel {
  margin-top: 60px;
  padding: 1rem;
}
.carousel img {
  width: 100%;
}
.grid {
  padding: 0 1rem;
}
.grid img {
  width: 100%;
}
.menu{
  margin-bottom: 5.5rem;
  padding: 1rem;
  background: #ebebeb;
}

</style>
